<!-- 基础信息 -->
<template>
  <div>
    <div class="title pl0">
      <h3>基础信息</h3>
      <el-button
        type="text"
        v-if="isDisable && isLocked == '待锁定'"
        @click=" handleEdit"
        >编辑</el-button
      >
    </div>
    <el-form
      ref="formModel"
      :model="formModel"
      :rules="rules"
      label-width="130px"
    >
      <el-row :gutter="24">
        <el-col :span="8">
          <el-form-item label="产品编号:">
            <div :class="isDisable ? 'border_line' : ''">
              <el-input
                v-if="!isDisable"
                v-model="formData.productNumber"
                placeholder="请输入内容"
                size="small"
                disabled
              />
              <span v-else>{{ formData.productNumber }}</span>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="客户名称:">
            <div :class="isDisable ? 'border_line' : ''">
              <el-select
                v-model="formData.customerCode"
                v-if="!isDisable"
                placeholder="请选择客户名称"
                clearable
                filterable
                disabled
                style="border: none"
                size="small"
              >
                <el-option
                  v-for="item in customerList"
                  :key="item.customerCode"
                  :label="item.customerName"
                  :value="item.customerCode"
                />
              </el-select>
              <span v-else-if="customerList.length">{{
                querySelectName(
                  customerList,
                  formData.customerCode,
                  "customerName",
                  "customerCode"
                )
              }}</span>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="产品类型:">
            <div :class="isDisable ? 'border_line' : ''">
              <el-select
                v-if="!isDisable"
                v-model="formData.productType"
                placeholder="请选择产品类型"
                clearable
                filterable
                size="small"
              >
                <el-option
                  v-for="item in orderTypeList"
                  :key="item.objectCode"
                  :label="item.objectName"
                  :value="item.objectCode"
                />
              </el-select>
              <span v-else-if="orderTypeList.length">{{
                querySelectName(
                  orderTypeList,
                  formData.productType,
                  "objectName",
                  "objectCode"
                )
              }}</span>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="8">
          <el-form-item label="产品名称:">
            <div :class="isDisable ? 'border_line' : ''">
              <el-input
                v-if="!isDisable"
                v-model="formData.productName"
                placeholder="请输入内容"
                size="small"
              />
              <span v-else>{{ formData.productName }}</span>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="产品版面:">
            <div :class="isDisable ? 'border_line' : ''">
              <el-select
                v-if="!isDisable"
                v-model="formData.productLayout"
                placeholder="请选择"
                filterable
                disabled
                size="small"
              >
                <el-option label="新版" value="新版"> </el-option>
                <el-option label="改版" value="改版"> </el-option>
              </el-select>
              <span v-else>{{ formData.productLayout }}</span>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="产品版本:">
            <div :class="isDisable ? 'border_line' : ''">
              <el-input
                v-if="!isDisable"
                :value="
                  'V' +(formData.updateVersion+1)
                "
                placeholder="请输入内容"
                disabled
                size="small"
              />
              <span v-else
                >{{ "V" +(formData.updateVersion+1) }}
              </span>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="8">
          <el-form-item label="产品单价:">
            <div :class="isDisable ? 'border_line' : ''">
              <el-input
                v-if="!isDisable"
                v-model="formData.productPrice"
                type="number"
                @blur="handlePrice"
                placeholder="请输入内容"
                size="small"
              >
                <div slot="suffix" style="padding-right: 5px; padding-top: 3px">
                  元
                </div>
              </el-input>
              <span v-else>{{ formData.productPrice }}</span>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="产品来源:">
            <div :class="isDisable ? 'border_line' : ''">
              <el-select
                v-if="!isDisable"
                v-model="formData.productSource"
                placeholder="请选择"
                filterable
                size="small"
              >
                <el-option label="新系统" :value="0"> </el-option>
                <el-option label="老系统" :value="1"> </el-option>
              </el-select>
              <span v-else>{{ formData.productSource === 0 ?"新系统":"老系统" }}</span>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="24">
          <el-form-item label="产品要求:">
            <div :class="isDisable ? 'border_line' : ''">
              <el-input
                v-if="!isDisable"
                v-model="formData.productRequirement"
                type="textarea"
                :rows="3"
                placeholder="请输入内容"
                size="small"
              />
              <span v-else>{{ formData.productRequirement }}</span>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="footer mt16" v-if="!isDisable">
      <el-button size="small" @click="handleCancel">取消</el-button>
      <el-button
        size="small"
        :loading="loading"
        class="ml16"
        type="primary"
        @click="handleSave"
        >保存</el-button
      >
    </div>
  </div>
</template>
      <script>
import { querySelectName } from "@/utils";
import { nextTick } from "process";
export default {
  props: {
    productCode: {
      type: String,
      default: () => {
        return "";
      },
    },
    isLocked: {
      type: String,
      default: () => {
        return "";
      },
    },
    isShowEdits:{
      type: Boolean,
      default: () => {
        return false;
      },
    },
    formModel: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  watch: {
    formModel: {
      immediate: true,
      handler(newVal, oldVal) {
        console.log(this.formModel)
        // this.getDetail(newVal)
        this.formData = this.formModel;
      },
    },
  },
  data() {
    return {
      querySelectName,
      customerList: [], //客户列表
      orderTypeList: [], //产品类型数据
      isDisable: true,
      loading: false,
      formData: {},
      rules: {}, //表单验证
    };
  },
  created() {
    // 获取客户列表
    this.getQueryPageCustomerList();
    //获取产品类型
    this.getProductType();
  },
  methods: {
    // 获取客户列表
    getQueryPageCustomerList() {
      const cusSearch = {
        likeWords: "",
        settlementWay: 0,
        belongToSalesman: "",
        pageIndex: 1,
        pageSize: 9999,
      };
      this.$api.business.QueryPageCustomerList(cusSearch).then((res) => {
        this.customerList = res.list;
      });
    },

    handleEdit(){
      if(this.isShowEdits){
        this.isDisable = false
        this.isShowEdits = false
        this.$emit('showEditEvent',this.isShowEdits)
      }else{
        this.$message.warning('有未保存的编辑，请保存后再编辑')
      }
    },

    //取消
    handleCancel() {
      this.$confirm("信息尚未保存，是否保存?", "提示", {
        confirmButtonText: "是",
        cancelButtonText: "否",
        type: "warning",
      })
        .then(() => {
          this.handleSave();
        })
        .catch(() => {
          this.getDetail(this.productCode);
          this.isDisable = true;
          this.isShowEdits = true
          this.$emit('showEditEvent',this.isShowEdits)
        });
    },

    handlePrice(row) {
      this.formData.productPrice = Number(this.formData.productPrice);
      this.formData.productPrice = JSON.parse(
        this.formData.productPrice.toFixed(4)
      );
    },

    //获取产品类型
    getProductType() {
      this.$api.business.GetSaleOrderTypeDataList().then((res) => {
        this.orderTypeList = res;
      });
    },

    //保存
    handleSave() {
      this.loading = true;
      this.$api.business
        .UpdateProductBaseData(this.formData)
        .then((res) => {
          this.isDisable = true;
          this.loading = false;
          this.isShowEdits = true
          this.$emit('showEditEvent',this.isShowEdits)
          this.$message.success("保存成功");
          this.getDetail(this.productCode);
        })
        .catch(() => {
          this.loading = false;
        });
    },

    //获取详情
    getDetail(id) {
      this.$emit("init", "");
      // const parmas = {
      //   queryBy: 2,
      //   queryValue: id,
      // };
      // this.$api.business.GetSingleProductByProductCode(parmas).then((res) => {
      //   this.formData = res.baseData;
      // });
    },
  },
};
</script>

      <style lang="scss" scoped>
.footer {
  display: flex;
  justify-content: center;
}

.title h3:before {
  content: "" !important;
  padding-right: 9px !important;
  border-left: 3px solid #3f61f1;
}

.border_line {
  border-bottom: 1px solid #dcdfe6;
  min-height: 32px;
}
</style>
